<script setup>
import Popup from '../components/Popup.vue'
import Ming from '../components/Ming.vue'
import List from '../components/List.vue'
import { useRouter } from 'vue-router'
import { onMounted, reactive, onBeforeMount, getCurrentInstance } from 'vue';
import { Popups, Popups1, Tab, banners } from '../http/api'
const { proxy } = getCurrentInstance()
const data = reactive({
  listOne: [{
    Oshow: true,
    list: [],
  },
  {
    Oshow: false,
    list: [],
  },
  {
    Oshow: false,
    list: [{
      title: '在校',
    },
    {
      title: '在职',
    }],
  }],
  Tab: [],
  ti: [{
    id: 0,
    title: "精选",
  }],
  Bner: [],
  mian: [],
  Jiang: [],
  Child: [],
 

  Id: 0,
  tabId: 0,
  ans: false,
  Name: '',
  gzId: 0,




})
const router = useRouter()
// 请求数据
onMounted(async () => {
  const res = await Popups()
  console.log(res);
  data.listOne[0].list = res.data
  const res1 = await proxy.$http.GoodClass(50)
  // console.log(res1);
  data.Jiang = res1.data
  console.log(data.listOne[0].list);
  getlist()

})
// 挂载之前
onBeforeMount(() => {
  let obj = localStorage.getItem('key')
  let vs = JSON.parse(obj) || []
  if (vs.length !== 3) {
    localStorage.removeItem('key')
  } else if (vs.length === 3) {
    data.listOne[0].Oshow = false
    console.log(vs[0].title);
    data.Name = vs[0].title
    data.Id = vs[0].id
  }


})
// 第一个弹出框
const One = async (id, name) => {
  data.listOne[0].Oshow = false
  data.listOne[2].Oshow = true
  console.log(id, name);
  data.Id = id
  console.log(id);
  data.Name = name

  const res = await Popups1(id)
  // console.log(res);
  data.listOne[1].list = res.data

}
// 第二个弹框
const Two = (id) => {
  if (id) {
    data.listOne[2].Oshow = false
    data.listOne[1].Oshow = true


  }
}
// 第三个弹框
const There = (id) => {
  data.ans = true
}
// 返回1
const back1 = () => {
  data.listOne[1].Oshow = false
  data.listOne[0].Oshow = true
  Gong()

}
// 返回2
const back2 = () => {
  data.listOne[1].Oshow = false
  data.listOne[2].Oshow = true
  data.ans = false
  Gong()

}
const Gong = () => {
  let obj = localStorage.getItem('key')
  let vs = JSON.parse(obj) || []
  vs.pop()
  localStorage.setItem('key', JSON.stringify(vs))
}
// 完成按钮
const wan = async () => {
  data.listOne[1].Oshow = false
  getlist()
}
console.log(data.Sone);
const getlist = async () => {
  if (data.Name) {
    const res = await Tab(data.Id)
    console.log(res);
    data.Tab = [...data.ti, ...res.data]
    const res1 = await banners(data.Id)
    console.log(res1);
    data.Bner = res1.data


    const res2 = await proxy.$http.mask(data.Id)
    data.mian = res2.data
    console.log(res2);
  }
}
// tab切换
const tabjump = async (id, index) => {
  data.tabId = id
  data.TabIndex = index
  const res = await proxy.$http.GoodClass(id)
  data.Jiang = res.data
  const res3 = await Tab(data.Id)
  // console.log(res);
  data.Tab = [...data.ti, ...res3.data]
  const res2 = await proxy.$http.banners(id)
  data.Bner = res2.data

  if (index === 0) {
    const res2 = await proxy.$http.banners(data.Id)
    data.Bner = res2.data
  }

}
const back = async () => {
  data.listOne[1].Oshow = true

  const res = await Popups1(data.Id)
  // console.log(res);
  data.listOne[1].list = res.data
  Gong()
}
// 管综
const gz = async (index) => {
  // console.log();
  data.gzId = index
  const res = await proxy.$http.GoodClass(index)
  data.Jiang = res.data

}
// 轮播图跳转详情
const bnar = async (item, id) => {
  console.log(item);
  // const res = await proxy.$http.userInfo(id)
  // console.log(res);
  router.push({
    path: '/about', query: {
      id: id
    }
  })

}
// 列表跳转
const Ms = (id) => {
  console.log(id);
  router.push({
    path: '/about', query: {
      id: id
    }
  })
}
const Ljump = () => {
  router.push({
    path: '/login'
  })
}

</script>

<template>
  <main class="backg">
    <!--第一个弹框 -->
    <Popup :listOne="data.listOne[0]" @ShowM="One" :sn="false">
      <template v-slot:one>
        <h2 class="top"> 选择考试</h2>
      </template>
    </Popup>
    <!--第二个弹框 -->
    <Popup :listOne="data.listOne[2]" @Shows="Two">
      <template v-slot:one>
        <div class="tbox">
          <van-icon name="arrow-left" size="45px" @click="back1" class="icon" />
          <h2 class="top1"> {{ data.Name }}</h2>
        </div>
      </template>
    </Popup>
    <!--第三个弹框 -->
    <Popup :listOne="data.listOne[1]" @ShowM="There">
      <template v-slot:one>
        <div class="tbox">
          <van-icon name="arrow-left" size="25px" @click="back2" />
          <h2 class="top1"> {{ data.Name }}</h2>
          <van-button color="#f15a24" size="mini" class="an" round v-if="(data.ans === true)"
            @click="wan">完成</van-button>
        </div>
      </template>
    </Popup>
    <div class="Zbox">
      <div class="Ztop">
        <div class="tleft">
          <h3 @click="back"> {{ data.Name }}></h3>
        </div>
        <div class="tright">
          <div class="Timg1" @click="Ljump">
          </div>
          <div class="Timg2">
          </div>
        </div>
      </div>
      <ul class="tab">
        <li v-for="(item, index) in data.Tab" :key="index" @click="tabjump(item.id, index)"
          :class="(data.tabId === item.id ? 'Tactive' : '')">
          {{ item.title }}
        </li>
      </ul>

      <!-- {{data.Bner}} -->
      <div class="Bn" v-if="data.Bner !== []">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in (data.Bner || [])" :key="index" @click="bnar(item, item.id)">
            <img :src="item.banner_img" alt="">
          </van-swipe-item>
        </van-swipe>
      </div>

      <div>
        <!-- {{data.Tab[data.TabIndex]}} -->
        <ul class="u2" v-if="(data.tabId !== 0)">
          <li :class="data.gzId === item.id ? 'l2 active' : 'l2'" v-for="(item, index) in data.Tab[data.TabIndex].child"
            :key="index" @click="gz(item.id)">
            {{ item.title }}
          </li>
        </ul>
      </div>
      <div class="mian">
        <div class="quan">
          <div class="ileft">
            <img class="i1" src="https://wap.lexuemiao.com/img/haiyangyuyuye@3x.95e33040.png" alt="">
            <img class="i2" src="https://wap.lexuemiao.com/img/haiyangyuyuye3.36c87209.png" alt="">
          </div>
          <div>
            <van-notice-bar :scrollable="false" background="#fff" color="#000" speed="10"
              style="width: 500px; height: 100px;">
              <van-swipe vertical class="notice-swipe" :show-indicators="false" :autoplay="3000"
                style="width: 500px;height: 100px; ">
                <van-swipe-item class="lim">20:30 23数学救命密押200题</van-swipe-item>
                <van-swipe-item class="lim">20:30 23数学救命密押200题</van-swipe-item>
              </van-swipe>
            </van-notice-bar>

          </div>
        </div>
      </div>
      <div style="text-align: center;">
        <img
          src=""
          alt="">
        <p style="color:#a2a7b8; font-size: 35px;">距离考研19天</p>
      </div>

      <!-- {{data.mian}} -->
      <div class="mian1">
        <div class="quan1">
          <h1>{{ data.mian.model_name
          }}</h1>
          <div>
            查看全部 >
          </div>
        </div>
        <div class="Mto">
          <Ming :list="data.mian.course_list" @jump="Ms" />
        </div>
      </div>
      <div>
        <List :Jiang="data.Jiang" @jump="Ms" />
      </div>
    </div>
  
  </main>
</template>
<style lang="scss" scoped>
.top {
  text-align: center;
  margin: 40px 0;
}

.top1 {
  position: absolute;
  left: 290px;
  top: 2px;
  color: #000;
}

.tbox {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  position: relative;
  box-sizing: border-box;
  padding-left: 30px;
  margin-bottom: 60px;
  margin-top: 40px;

}

.an {
  margin-left: 60px;
  width: 140px;
  height: 75px;
  font-size: 30px;
  position: absolute;
  right: 10px;
  top: 0px;


}

.backg {
  width: 100%;
  background-color: #fafafa;
  height: 100%;
  box-sizing: border-box;
  padding: 0 20px;


}

.Zbox {
  width: 100%;

  .Ztop {
    font-size: 35px;
    width: 100%;
    height: 100px;
    // background-color: red;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20px 10px;

    .tright {
      width: 250px;
      display: flex;
      justify-content: space-around;

      .Timg1 {
        width: 50px;
        height: 50px;

        background: url() no-repeat;
        background-size: 100% 100%;
      }

      .Timg2 {
        width: 50px;
        height: 50px;
        background: url() no-repeat;
        background-size: 100% 100%;
      }
    }

  }

  .tab {
    font-size: 35px;
    display: flex;
    justify-content: space-around;
    align-items: center;


    li {

      height: 70px;

    }

    .Tactive {
      color: #f15a24;
      border-bottom: 5px solid #f15a24;
    }
  }

  .Bn {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 20px;


    .my-swipe {
      width: 100%;
      height: 300px;
      border-radius: 30px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .quan {
    width: 100%;
    height: 100px;
    // background-color: red;
    background-color: #fff;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 5px 10px;
    border-radius: 60px;
    box-shadow: 1px 1px 0.5px 1.5px #ccc;
    margin: 20px 0;

    .ileft {
      width: 200px;
      display: flex;
      align-items: center;

      // background-color: red;
      .i1 {
        height: 50px;
        width: 50px;
      }

      .i2 {
        height: 35px;
        width: 110px;
      }
    }

    .ileft::after {
      content: '';
      width: 1.5px;
      height: 30px;
      background-color: #ccc;
      margin-left: 15px;
    }

  }

  .quan1 {
    width: 100%;
    height: 100px;
    // background-color: red;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    // padding: 5px 10px;
    margin: 20px 0;
  }

  .lim {
    width: 500px;
    height: 100px;
    box-sizing: border-box;
    padding-top: 25px;
    display: flex;
  }

  .Mto {
    margin-top: 50px;
  }

  .u2 {
    width: 100%;
    display: flex;
    margin-top: 20px;


    .l2 {
      width: 140px;
      height: 70px;
      line-height: 70px;
      text-align: center;
      text-align: center;
      border: 1px #f4a83d solid;
      background-color: #fff4e5;
      color: #f15a24;
      text-align: center;
      margin-left: 20px;
    }

    .active {
      background-color: #f15a24;
      border: 1px solid #f15a24;
      color: #fff;
    }
  }
}

.icon {
  position: absolute;
  left: 10px;
  top: 8px;
  // top: 10px;
}


</style>
